<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>后台</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
		<style>
			body {
				margin: 0px;

			}

			.el-header,
			.el-aside,
			.el-main {
				text-align: center;
			}

			.el-header {
				line-height: 60px;
				padding: 0px;
				background-color: white;
				font-size: 35px;

			}

			.el-aside {
				position: fixed;
				bottom: 0px;
				top: 0px;
				background-color: #ffffff;
				line-height: 1em;
			}

			.el-main {
				position: fixed;
				right: 0px;
				left: 200px;
				top: 61px;
				bottom: 0px;
				background-color: #E9EEF3;
			}

			.el-tree {
				text-align: center;

			}
		</style>
	</head>
	<body>
		<div id="box1">
			<el-container>
				<el-aside width="200px">
					<h1>猫咖管理系统</h1>
					<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
				</el-aside>
				<el-container>
					<el-header>
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item><a href="index.html" target="_top">首页</a></el-breadcrumb-item>
							<el-breadcrumb-item>管理员信息</el-breadcrumb-item>
						</el-breadcrumb>
					</el-header>
					<el-main>
						<iframe style="height: 99%;width: 100%" src="index2.html" id="ifr" frameborder="0"></iframe>
					</el-main>
				</el-container>
			</el-container>
		</div>
		<script>
			new Vue({
				el: "#box1",
				data: {
					data: [{
							label: '主页',
							href: 'index2.html'
						}, {
							label: '我的',
							children: [{
									label: '我的宠物',
									href: 'pet.html',
								},
								{
									label: '我的信息',
									href: 'message.html',
								},
								{
									label: '文件管理',
									href: '',
								},
								{
									label: '我的预约',
									href: '',
								}
							]
						},
						{
							label: '门店信息',
							href: '',
							children: [{
									label: '门店详情',
									href: '',
								},
								{
									label: '打工喵',
									href: '',
								},
								{
									label: '本地喵',
									href: '',
								},
								{
									label: '外地喵',
									href: '',
								},
								{
									label: '猫咪领养',
									href: '',
								},
								{
									label: '预约管理',
									href: '',
								}
							]
						},
						{
							label: '系统管理',
							href: '',
							children: [{
									label: '用户管理',
									href: 'user2.html',
								},
								{
									label: '角色管理',
									href: '',
								},
								{
									label: '菜单管理',
									href: '',
								}
							]
						}
					],
					defaultProps: {
						children: 'children',
						label: 'label'
					}
				},
				methods: {
					handleNodeClick(data) {
						if (data.href != undefined) {
							document.getElementById("ifr").src = data.href;
						}
					}
				}
			})
		</script>
	</body>
</html>